import { List } from 'antd-mobile'
import { useMemo, useState } from 'react'
import { useHistory } from 'umi'
import { observer, useLocalObservable } from 'mobx-react' //
import NavBar from '@/components/Global/NavBar'
import styles from './index.module.less'
import Store from './store'
import CitySelect from './components/CitySelect'
import { RoleEnum } from '@/role'
import { stores } from '@/stores'
import type { UpdateUserInfoParamsType } from '../api/interface'

export default observer(() => {
    const { userInfo, cityInfo, provinceList, cityMap, updateData } = useLocalObservable(
        () => new Store(),
    )

    const history = useHistory()
    const { getRoleInfo, getUserInfo } = stores.userStore
    const account = getUserInfo?.username || getUserInfo?.phone
    const [visible, setVisible] = useState<boolean>(false)

    /**是否可以修改地区 */
    const isEditRegion = ![
        RoleEnum.province,
        RoleEnum.trainerCompany,
        RoleEnum.trainerOrgan,
    ].includes(getRoleInfo!.role_id)

    const goChangeInfo = (type: 'phone' | 'idcard' | 'realname') => {
        const value = userInfo[type]
        history.push(`/personal/changeInfo?type=${type}`, { value })
    }

    const onCityChange = (value: [string, string]) => {
        const [province_code, city_code] = value
        const params: UpdateUserInfoParamsType = {
            province_code,
            city_code,
        }
        updateData(params)
    }
    const cityValue = useMemo(
        () => [userInfo.province_code as string, userInfo.city_code as string],
        [userInfo.province_code, userInfo.city_code],
    )
    const arrow = isEditRegion ? {} : { arrow: null }
    return (
        <div className={styles.page}>
            <NavBar title={'基本信息'} />
            <div className={styles.content}>
                <List header="基本信息">
                    <List.Item disabled>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>账号</div>
                            <span className={styles.blockText}>{account}</span>
                        </div>
                    </List.Item>

                    <List.Item onClick={() => goChangeInfo('realname')}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>姓名</div>
                            <span className={styles.blockText}>{userInfo.realname}</span>
                        </div>
                    </List.Item>
                    {/* <List.Item arrow={null}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>
                                性别
                            </div>
                            <span >{userInfo.realname}</span>
                        </div>
                    </List.Item> */}
                    <List.Item onClick={() => goChangeInfo('idcard')}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>身份证</div>
                            <span className={styles.blockText}>{userInfo.idcard}</span>
                        </div>
                    </List.Item>
                    {/* <List.Item arrow={null}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>
                                出生日期
                            </div>
                            <span >{userInfo.idcard}</span>
                        </div>
                    </List.Item> */}
                    <List.Item {...arrow} onClick={() => isEditRegion && setVisible(true)}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>地区</div>
                            <span className={styles.blockText}>{cityInfo}</span>
                        </div>
                    </List.Item>
                    {/* <List.Item onClick={() => goChangeInfo('company')}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>
                                工作单位
                            </div>
                            <span className={styles.blockText}  >{userInfo.realname}</span>
                        </div>
                    </List.Item> */}
                    <List.Item onClick={() => goChangeInfo('phone')}>
                        <div className={styles.listItem}>
                            <div className={styles.itemLabel}>手机号码</div>
                            <span className={styles.blockText}>{userInfo.phone}</span>
                        </div>
                    </List.Item>
                </List>
                {/* <List header='授课档期'>
                    <div className={styles.teachDate}>
                        <div className={styles.teachItem}>
                            <div>2022-03-05至2022-04-01</div>
                            <div>湖北省襄阳市</div>
                        </div>
                        <div className={styles.teachItem}>
                            <div>2022-03-05至2022-04-01</div>
                            <div>湖北省襄阳市</div>
                        </div>
                    </div>
                </List> */}
            </div>
            <CitySelect
                visible={visible}
                setVisible={setVisible}
                provinceList={provinceList}
                onChange={onCityChange}
                cityMap={cityMap}
                value={cityValue}
            />
        </div>
    )
})
